<style lang="less" scoped>
    @import '../../styles/common.less';
    @import '../../styles/loading.less';
    @import 'diploma.less';
</style>

<template>
    <div>
        <Row style="font-size: 15px;">
            <Col span="22">
            奖项名称：<Input v-model="queryCon.name" clearable style="width: 15%"></Input>
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            </Col>
            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList" show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModalVisible"
                title="奖项信息"
                @on-ok="viewModalVisible = false"
                @on-cancel="viewModalVisible = false"
                width="45%">
            <Form :model="formData" :label-width="180">
                <Row>
                    <Col span="16">
                    <FormItem label="奖项名称">
                        <div class="conts">{{formData.name}}</div>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="16">
                    <FormItem label="奖项星级">
                        <Rate disabled v-model="formData.level"></Rate>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="16">
                    <FormItem label="创建时间">
                        <div class="conts">{{formData.createTime}}</div>
                    </FormItem>
                    </Col>
                </Row>
                </Row>
            </Form>
        </Modal>
        <Modal v-model="saveModalVisible"
               :title="(formData.id ? '修改' : '新增') + '奖项'"
               width="40%"
               @on-cancel="saveModalVisible = false"
               :mask-closable="false"
               :transfer="false">
            <Form :model="formData" :label-width="125">
                <Row>
                    <Col span="18">
                    <FormItem label="奖项名称">
                        <Input v-model="formData.name" clearable ></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="18">
                    <FormItem label="奖项星级">
                        <Rate show-text v-model="formData.level"></Rate>
                    </FormItem>
                    </Col>
                </Row>
            </Form>

            <div slot="footer">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="saveModalVisible = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import Cookies from 'js-cookie';
    import getDate from '@/util/getDate.js';

    export default {
        name: 'exportable-table',
        props: {
            themeId: ''
        },
        data () {
            return {
                columns: [{
                    title: '序号',
                    key: 'rownum',
                    align: 'center',
                    width: 65,
                    render: (h, params) => {
                        return h('div', {}, ((this.pageIndex - 1) * this.pageSize + params.index + 1));
                    }
                }, {
                    title: '奖项名称',
                    key: 'name'
                }, {
                    title: '机构名称',
                    key: 'organizename',
                    render: (h, params) => {
                        return h('div', {}, params.row.organize.orgName);
                    }
                }, {
                    title: '创建时间',
                    key: 'createTime',
                    render: (h, params) => {
                        return h('div', {}, getDate.getDate(params.row.createTime, 'time'));
                    }
                }, {
                    title: '操作',
                    key: 'action',
                    width: 300,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.detail(params.row);
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showEdit(params.row);
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.delete(params.row.id);
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }],
                data: [],
                formData: {},
                viewModalVisible: false,
                saveModalVisible: false,

                total: 0,
                pageIndex: 1,
                pageSize: 10,
                queryCon: {
                    name: ''
                },
                _themeId: '',
                baseuser: JSON.parse(Cookies.get('baseUser'))
            };
        },
        watch: {
            themeId: function (newVal, oldVal) {
                this._themeId = newVal;
                this.loadList();
            }
        },
        methods: {
            loadList () {
                util.ajax.post('/busine/diplomas/list', util.toFormData({
                    page: this.pageIndex,
                    size: this.pageSize,
                    name: this.queryCon.name,
                    themeId: this._themeId
                })).then(res => {
                    this.data = res.data.data.list;
                    this.total = res.data.data.total;
                });
            },
            detail (obj) {
                let formData = {};
                for (let key in obj) {
                    formData[key] = obj[key];
                }
                formData['createTime'] = getDate.getDate(formData.createTime, 'time');
                this.formData = formData
                this.viewModalVisible = true;
            },
            showAdd (obj) {
                this.formData = {};
                this.saveModalVisible = true;
            },
            showEdit (obj) {
                this.formData = {};
                util.ajax.post('/busine/diplomas/detail', util.toFormData({
                    id: obj.id
                })).then(res => {
                    if (res.data.data) {
                        var formData = res.data.data;
                        formData['createTime'] = getDate.getDate(formData.createTime, 'time');
                        this.formData = formData;
                        this.saveModalVisible = true;
                    } else {
                        this.$Modal.error({
                            title: '警告',
                            content: '出错了'
                        });
                    }
                });
            },
            save () {
                let formData = {};
                for (let key in this.formData) {
                    formData[key] = this.formData[key];
                }
                formData.themeId = this._themeId;
                formData.orgId = this.baseuser.orgId;
                util.ajax.post('/busine/diplomas/save', util.toFormData(formData)).then(res => {
                    if (res.data.message === 'SUCCESS') {
                        this.saveModalVisible = false;
                        this.$Message.success('保存成功！');
                        this.pageIndex = 1;
                        this.loadList();
                    } else {
                        this.$Message.warning(res.data.message || '未知错误！');
                    }
                });
            },
            delete (id) {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除？</p>',
                    onOk: () => {
                        util.ajax.post('/busine/diplomas/delete', util.toFormData({
                            id: id
                        })).then(res => {
                            if (res.data.message === 'SUCCESS') {
                                this.$Message.success('删除成功！');
                                this.loadList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            refresh () {
                this.queryCon = {
                    name: ''
                };
                this.loadList();
            }
        }
    };
</script>
